<template>
    <div class="add_article">
      <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
        <el-form-item prop="articleName" label="文章标题：">
          <el-input v-model.trim="form.articleName" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="文章详情：" prop="content">
             <el-button @click="toEdit">前往编辑</el-button>
        </el-form-item>
        <div class="template">
          <h1 style="font-size: 25px;">精选模板</h1>
          <el-button class="btn_more" type="text" @click="toModel">查看更多</el-button>
        </div>
        <div class="template_list">
          <div class="template_item" v-for="(item,index) in articleTemplateList" :key="index">
            <div>
              <el-image @click="chooseTemplate(item)" fit="fill" :src="item.templatePic" :alt="item.templateName"/>
              <!-- 遮罩层-暂未处理好 -->
              <!-- <div class="shadow"></div> -->
            </div>
            <p @click="chooseTemplate(item)">{{ item.templateName }}</p>
          </div>
        </div>
      </el-form>
      <div class="loading" v-load:[loadText]="loading" />
    </div>
  </template>
  <script>
import axios from 'axios';

  export default {
    props:{
      form: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        rules: {
          articleName:[
              { required: true, message: "标题不能为空", trigger: "blur"}
          ],
          content: [
              { required: true, message: "文章内容不能为空", trigger: "blur" },
          ],
        },
        loading:false,
        loadText: "加载中···",
        articleTemplateList: [
          {
            id: 0,
            templatePic:
              "https://cdn4.codesign.qq.com/prototypes/2024/03/13/1DWk924J7D1Q030GnMm13/biktvbfj0vgyvjlx/ef7d0ccb719e8f2e151ad81a49b23946.svg",
            templateUrl: "",
            templateName: "空白模板",
            templateType: "first",
          },
          {
            id: 1,
            templatePic: "http://home.i3vsoft.com:1080/group1/中国民企/官网/daaba462c1e6c3c48df843e1f4c2b366.jpg",
            templateUrl: "http://home.i3vsoft.com:1080/group1/%E4%B8%AD%E5%9B%BD%E6%B0%91%E4%BC%81/%E5%AE%98%E7%BD%91/d5f093268daa5e086020b2f3e558704e.html?download=0",
            templateName: "日报",
            templateType: "新闻稿",
          },
          {
            id: 2,
            templatePic:"http://home.i3vsoft.com:1080/group1/中国民企/官网/fc2c0fa32cb6d352cf6cf106f2e3d894.png",
            templateUrl: "http://home.i3vsoft.com:1080/group1/中国民企/官网/969e671810cc0930353f3fa5517ddb3c.html?download=0",
            templateName: "Bentley市政行业",
            templateType: "Bentley市政行业",
          },
          {
            id: 3,
            templatePic: "http://home.i3vsoft.com:1080/group1/中国民企/官网/04e958670ed4e711c101674adfb86afe.jpg",
            templateUrl: "http://home.i3vsoft.com:1080/group1/中国民企/官网/7e830870aaea843b38704b4bd383f69c.html?download=0",
            templateName: "公司企业",
            templateType: "公司企业",
          }
        ],
      };
    },
    mounted(){
    },
    methods: {
      // 前往编辑
      toEdit(){
        this.$emit('toEditor');
        this.$router.push({name:'文章编辑',params:{public: this.form?.onlineState===1}});
        setTimeout(() => {
          this.$store.commit("setHomepageHTML", this.form?.detailContent);
          this.$store.commit("triggerForceImport");
        }, 300);
      },

      // 选择模板
      toModel(){
        this.$emit('toEditor');
        this.$router.push({name:'文章模板',params:{isEdit:this.form.id!=null}});
      },
      chooseTemplate(item){
        this.$confirm(`${this.form.id?'选择新模板将会清空文章内容，':''}是否选择[${item.templateName}]模板？`, "模板选择", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: 'btnTrues',
          type: "warning",
        }).then(() => {
          this.$emit('toEditor');
          this.$router.push('/Main/articleManage/editor');
          setTimeout(async () => {
            // 获取在/public/template/index.html中的html代码
            await this.load(item.templateUrl);
          }, 300);
        }).catch(() => {})
      },

      // 加载html
      load(path) {
        if(path == ""){
          this.$store.commit("setHomepageHTML", '');
          this.$store.commit("triggerForceImport");
          return;
        }
        this.loading = true;
        axios.get(path, {
          headers: {
            accept: "text/html;charset=UTF-8",
          },
          params: {},
        })
        .then((res) => {
          this.$store.commit("setHomepageHTML", res.data);
          this.$store.commit("triggerForceImport");
          this.$nextTick(() => {
            this.loading = false;
          });
        }).catch((err) => {
          console.error(err);
          this.$nextTick(() => {
            this.loading = false;
          });
        });
      },
    },
  };
</script>
<style scoped lang="scss">
.editor {
  line-height: normal !important;
  height: 300px;
  margin-bottom: 30px;
  width: 95%;
}
.template {
  width: 97%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.template_list {
  width: 100%;
  margin: 10px auto;
  padding-top: 10px;
  display: grid;
  overflow-y: scroll;
  height: 250px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  justify-items: center;
  justify-content: space-evenly;
  gap: 20px 30px;
}
.shadow{
  color: white;
  height: 180px;
    border-radius: 10px;
    aspect-ratio: 10/6;
  cursor:default;
  position: absolute;
  background-color: rgba(118, 116, 116, 0.589);
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
.template_item {
  max-width: 100%;
  // height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  p{
    margin-top: 10px;
    margin-bottom: 25px;
    font-size: large;
    &:hover{
      cursor: pointer;
      color: #b8b9ba;
    }
    &:active{
      color: #e0e1e3;
    }
  }
  .el-image{
    transition: 500ms;
    height: 180px;
    border: 1px solid #b8b9ba;
    border-radius: 10px;
    aspect-ratio: 10/6;
    &:hover{
      cursor: pointer;
      // margin-top: -20px;
      margin-bottom: -10px;
      height: 170px;
    }
  }
}
.btn_more{
  color: #7e72f2;
  &:hover{
    color: #7f72f280;
  }
  &:active{
    color: #7f72f2b8;
  }
}
</style>